<template>
  <div style="background: #f1f1f1; height: 100%; padding: 16px">
    <ElCard class="container" header="3个条件以内，没有展开收起">
      <CommonFastSearch
        v-model="formData"
        :properties="properties1"
        @reset="reset"
        @search="search"
      ></CommonFastSearch>
    </ElCard>
    <ElCard
      class="container"
      style="margin-top: 16px"
      header="超过3个条件，有展开收起"
    >
      <CommonFastSearch
        v-model="formData"
        :properties="properties2"
        @reset="reset"
        @search="search"
      ></CommonFastSearch>
    </ElCard>
    <ElCard
      class="container"
      style="margin-top: 16px"
      header="所有默认插槽均没有labelText属性"
    >
      <CommonFastSearch
        v-model="formData"
        :properties="properties3"
        @reset="reset"
        @search="search"
      ></CommonFastSearch>
    </ElCard>
  </div>
</template>

<script>
import CommonFastSearch from "./index.vue";
export default {
  name: "Searchtwo",
  components: {
    CommonFastSearch,
  },
  data() {
    return {
      formData: {},
      properties1: {
        string: {
          title: "字符串",
          type: "string",
          options: {
            placeholder: "请输入",
          },
        },
        string2: {
          title: "字符串2",
          type: "string",
          options: {
            placeholder: "请输入",
          },
        },
      },
      properties2: {
        string: {
          title: "字符串",
          type: "string",
          options: {
            placeholder: "请输入",
            clearable: true,
          },
        },
        select: {
          title: "选择框",
          type: "string",
          enumOptions: [
            { label: "启用", value: "Y" },
            { label: "禁用", value: "N" },
          ],
        },
        select2: {
          title: "选择框内容来自于接口",
          type: "string",
          enumOptions: [],
        },
        select3: {
          title: "多选",
          type: "array",
          widget: "SelectWidget",
          enumOptions: [],
          options: {
            multiple: true,
          },
        },
        inputTag: {
          title: "多选输入框",
          type: "array",
          widget: "CommonInputTagWidget",
        },
      },
      properties3: {
        string: {
          type: "string",
          options: {
            placeholder: "请输入",
            clearable: true,
          },
        },
        select: {
          type: "string",
          enumOptions: [
            { label: "启用", value: "Y" },
            { label: "禁用", value: "N" },
          ],
        },
        select2: {
          type: "string",
          enumOptions: [],
        },
        select3: {
          type: "array",
          widget: "SelectWidget",
          enumOptions: [],
          options: {
            multiple: true,
          },
        },
        inputTag: {
          type: "array",
          widget: "CommonInputTagWidget",
        },
      },
    };
  },
  async mounted() {
    this.$set(this.properties2.select2, "enumOptions", await this.getOptions());
    this.$set(this.properties2.select3, "enumOptions", await this.getOptions());
    this.$set(this.properties3.select2, "enumOptions", await this.getOptions());
    this.$set(this.properties3.select3, "enumOptions", await this.getOptions());
  },
  methods: {
    reset() {
      console.log("重置");
      this.formData = {};
    },
    search() {
      console.log("查询");
    },
    getOptions() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve([
            { label: "未完成", value: "-1" },
            { label: "已完成", value: "1" },
            { label: "进行中", value: "0" },
          ]);
        });
      });
    },
  },
};
</script>
